<template>
  <div>
    <h2>home</h2>
    <button @click="addNum(5)">+</button>
    {{ $store.state.num }}
    <button @click="reduceNum(10)">-</button>
    <ul>
      <li v-for="art in $store.state.blogs" :key="art.id">
        <h5>{{art.title}}</h5>
        <img :src="art.pic" width="200" alt="">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    addNum (n) {
      this.$store.commit('CHANGE_NUM', n)
    },
    reduceNum (n) {
      this.$store.commit('REDUCE_NUM', n)
    }
  },
  created () {
    console.log(this.$store)
    this.$store.dispatch('FETCH_BLOGS', { page: 1, pageSize: 10 })
  }
}
</script>

<style lang="scss" scoped>

</style>
